<template>
    <div>
        <!-- 标题 -->
        <navtitle title="分类"></navtitle>
        <van-row>
            <!-- 左 -->
            <van-col span="6">
                <!-- 侧边导航 -->
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="item in categoriesApiData" :title="item.cat_name" />
                </van-sidebar>
            </van-col>
            <!-- 右 -->
            <!-- 骨架 -->

            <van-col span="18">
                <div v-if="skeleton">
                    <van-skeleton title :row="20" row-width="[100%]" />
                </div>
                <div v-for="item in categoriesApiData[active]?.children" v-else>
                    <h5>{{ item.cat_name }}</h5>
                    <!-- 宫格 -->
                    <van-grid :column-num="4">
                        <div v-for="item in item.children">
                            <router-link :to="{ name: 'shop', params: { query: item.cat_name } }">
                                <van-grid-item :icon="item.cat_icon" :text="item.cat_name" />
                            </router-link>
                        </div>
                    </van-grid>
                </div>

            </van-col>
        </van-row>
    </div>
</template>

<script setup>
// 标题
import navtitle from '@/components/navtitle.vue';
import { ref } from 'vue';
// 高亮默认
const active = ref(0);
let skeleton = ref(true)
import { categoriesApi } from '@/api/api';
let categoriesApiData = ref([])
categoriesApi().then((res) => {
    console.log(res);
    categoriesApiData.value = res.data.message
    if (categoriesApiData.value.length > 0) {
        skeleton.value = false
    }
})
</script>

<style lang="scss" scoped></style>